<template>
  <!-- 所有用户-->
  <div class="product-list">
    <p class="product-list-title">用户资料</p>
    <viewer :images="productList" class="product-list-content">
      <router-link class="product-list-content-li"  v-for="item in productList" :to="{path: item.url}" :key="item.title">
        <img :src="item.path" />
        <p class="product-list-content-p1">{{item.title}}</p>
        <p class="product-list-content-p2">{{item.text}}</p>
      </router-link>
    </viewer>
  </div>
</template>

<script>
export default {
  components: {
  },
  data () {
    return {
      productList: [
        {
          title: '小数',
          text: '本科',
          path: require('@/assets/1.jpg')
        },
        {
          title: '小红',
          text: '硕士',
          path: require('@/assets/2.jpg')
        },
        {
          title: '小史蒂夫',
          text: '专科',
          path: require('@/assets/1.jpg')
        }
      ]
    }
  },
  async mounted () {
  },
  computed: {
  },
  methods: {
  },
  destroyed () {
  }
}
</script>
<style lang="less">
.product-list {
  background: #F8FAFC;
  padding-bottom: 70px;
  &-title {
    padding: 57px 0;
    font-size: 28px;
    font-weight: 400;
    color: #324258;
    line-height: 42px;
    text-align: center;
  }
  &-content {
    width: 900px;
    margin: 0 auto;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    &-li {
      width: 250px;
      padding:15px;
      border-radius: 4px;
      margin: 20px 10px;
      text-align: center;
      background: #d9f6fa;
      img {
        width: 60px;
        height: 60px;
      }
      &:hover {
        cursor: pointer;
        transform: scale(1.1);
        transition: 0.5 ease;
        box-shadow: 0px 0px 16px 0px #A6DFE8;
      }
    }
    &-p1{
      margin-top:42px;
      font-size:18px;
      color:#0F3565;
      line-height: 30px;
      font-weight: bold;
    }
    &-p2{
      margin-top:13px;
      color:#697b93;
      line-height: 23px;
      font-size: 16px;
    }
  }
}
</style>